// 动画事件

.transition () {
    transition: all 0.3s linear;
}

.slide-fade {
    &-move {
        &-left {

            &-enter-active,
            &-leave-active {
                .transition
            }

            &-enter,
            &-leave-to {
                transform: translateX(-30px);
                opacity: 0;
            }
        }

        &-right {

            &-enter-active,
            &-leave-active {
                .transition
            }

            &-enter,
            &-leave-to {
                transform: translateX(30px);
                opacity: 0;
            }
        }
    }

    @keyframes opacity-in {
        0% {
            opacity: 0;
        }

        70% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    &-opacity {

        &-enter-active,
        &-leave-active {
            transition: opacity .2s;
        }
        &-enter-active {
            transition-delay: 0.2s;
        }
        &-enter,
        &-leave-to {
            opacity: 0;
        }

    }
}